<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools>
        <template #left>
          <span>总记录数: 16 条</span>
        </template>

        <template #right>
          <el-button type="warning" size="small" @click="$router.push
          ('/import')">excel导入</el-button>
          <el-button type="danger" size="small" @click="handleExport">excel导出</el-button>
          <el-button type="primary" size="small" @click="showDialog=true">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 添加员工弹出层组件************************************** -->
      <add-employee :show-dialog.sync="showDialog" @loadEmployeeList="loadEmployeeList" />

      <el-card style="margin-top: 10px;">
        <el-table border :data="list">
          <el-table-column label="序号" type="index" :index="index" sortable="" />
          <el-table-column label="姓名" prop="username" sortable="" />
          <el-table-column label="工号" prop="workNumber" sortable="" />
          <!-- 因为后台使用的1,2的形式来表达 正式,非正式,所以要自己修改里面的内容 -->
          <el-table-column label="聘用形式" prop="formOfEmployment" sortable="">
            <template v-slot="{row}">
              {{ row.formOfEmployment == 1 ? '正式' : '非正式' }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" sortable="" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable="">
            <!-- 使用作用域插槽,写三元表达式,拆分字符串方式************ -->
            <!-- 用split() 方式拆分字符串, 从T 拆分, 得到的是数组,要第一个,所以[0] -->
            <template v-slot="{row}"> {{ !row.timeOfEntry?'': row.timeOfEntry.split('T')[0] }}</template>
            <!-- 使用作用域插槽,过滤器的方式 -->
            <!-- <template v-slot="{row}">
              {{ row.timeOfEntry | formatDate }}
            </template> -->
          </el-table-column>
          <el-table-column label="账户状态" prop="enableState" sortable="">
            <template #default="{row}">
              <!-- 开关**:active-value是告诉开关,打开的值   :inactive-value关闭的值-->
              <el-switch v-model="row.enableState" :active-value="1" :inactive-value="2" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <!-- 点击查看,跳转路由, 并传id ************-->
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assignRole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 ************************-->
        <!--  -> 表示一共条数,显示在最右侧-->
        <el-pagination :page-sizes="[2, 4, 6, 8, 10, 100]" layout="sizes, prev, pager, next, jumper, ->, total" :total="total" :current-page="filterParams.page" :page-size="filterParams.size" background @current-change="changePage"
          @size-change="sizeChange" />

        <!-- 分配角色弹出层********************* -->
        <assign-role :current-user-id="currentUserId" :show-role-dialog.sync="showRoleDialog" />
      </el-card>
    </div>
  </div>
</template>

<script>
// import Types from '@/api/constant/employees.js'
// import moment from 'moment'
// 导入API 获取员工详情列表,删除员工
import { reqGetEmployeeList, reqDelEmployee } from '@/api/employees'
// 导入添加员工弹出层组件
import AddEmployee from './components/AddEmployee.vue'
// 导入分配角色弹出层
import AssignRole from './components/assign-role.vue'

export default {
  name: 'Employees',
  // 注册组件
  components: {
    AddEmployee,
    AssignRole
  },
  data () {
    return {
      list: [], // 列表数据
      total: 0, // 总长度
      // 查询参数
      filterParams: {
        page: 1,
        size: 10
      },
      // 当前分配角色的用户ID
      currentUserId: '',

      // 控制弹出层的显示隐藏
      showDialog: false,
      // 控制角色管理弹出层
      showRoleDialog: false
    }
  },
  computed: {
    index () {
      return (this.filterParams.page - 1) * this.filterParams.size + 1
    }
  },
  created () {
    this.loadEmployeeList()
  },
  methods: {
    // 获取员工列表数据
    async loadEmployeeList () {
      // 调用接口
      const ret = await reqGetEmployeeList(this.filterParams)
      console.log(ret)
      this.list = ret.data.rows // 保存列表
      this.total = ret.data.total // 保存总长度
    },
    // 监听每页条数的变化
    sizeChange (pagesize) {
      this.filterParams.size = pagesize // 将最新的赋值给查询参数
      this.loadEmployeeList() // 调用接口方法,重新获取数据
    },
    // 监听页码的切换操作
    changePage (page) {
      // page表示切换后最新的页码
      this.filterParams.page = page // 将最新的赋值给查询参数
      this.loadEmployeeList() // 调用接口方法,重新获取数据
    },
    // 删除员工***************
    handleDelete (id) {
      // 确认框
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用删除接口
        const ret = await reqDelEmployee(id)
        console.log(ret)
        if (ret.code === 10000) {
          // 弹窗
          this.$message.success(ret.message)
          // 刷新数据
          this.loadEmployeeList()
        } else {
          this.$message(ret.message)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 把后端返回的员工数据转换为Excel需要的格式
    translateData (list) {
      const result = {
        title: [],
        data: []
      }
      const headers = {
        '姓名': 'username',
        '手机号': 'mobile',
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      // 生成导出的表头信息
      // result.title = ['姓名', '手机号',....]
      result.title = Object.keys(headers)

      // 转换原始的员工列表数据
      list.forEach(item => {
        // 每次遍历应该生成一行数据
        const row = []
        // 生成每一行数据项（列）
        result.title.forEach(tname => {
          // 根据中文的名称tname，获取英文的名称
          const enKey = headers[tname]
          // 根据英文的key获取对应的属性值
          const value = item[enKey]
          // 处理特殊的值 (处理聘用形式跟时间的问题)***********
          // if (enKey === 'formOfEmployment') {
          //   // 聘用形式
          //   const info = Types.hireType.find(item => item.id === Number(value))
          //   if (info) {
          //     value = info.value
          //   } else {
          //     value = '其他'
          //   }
          // } else if (['timeOfEntry', 'correctionTime'].includes(enKey)) {
          //   // 处理时间格式
          //   try {
          //     value = moment(value).format('yyyy-MM-DD')
          //   } catch (err) {
          //     console.log(err)
          //     value = '无效日期'
          //   }
          // }
          // 把该列数据放到row中
          row.push(value)
        })
        // 把一个员工的数据放到最终的二维数组中
        result.data.push(row)
      })
      return result
    },
    // 导出员工信息
    async handleExport () {
      // 获取需要导出的员工列表数据
      const ret = await reqGetEmployeeList({ page: 1, size: 10000 })
      // 把员工的数据转换为二维数组
      const result = this.translateData(ret.data.rows)
      // import导入的文件称之为：按需加载(webpack)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          //       // 表头 必填  ************举例数据
          //       header: ['姓名', '工资'],
          //       // 具体数据 必填
          //       data: [
          //         ['刘备', 100],
          //         ['关羽', 500]
          //       ],
          // 表头 必填
          header: result.title,
          // 具体数据 必填
          data: result.data,
          // 下载的文件名称
          filename: 'excel-list',
          // 列宽是否自动
          autoWidth: true,
          // 文件后缀名称
          bookType: 'xlsx'
        })
      })
    },
    // 点击角色
    assignRole (id) {
      this.showRoleDialog = true // 将控制弹窗的赋值true ,让其显示
      this.currentUserId = id // 将当前的角色id 保存起来
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
